<template>
    <yd-layout id="app">
        <navbar slot="navbar" :title="$route.meta.title" v-show="$route.meta.navShow"></navbar>
        <!--1.transition，vue中的内置过渡效果，与css中.router-fade-enter-active, .router-fade-leave-active 属性结合实现过渡动画-->
        <!--2.每个路由都可以给它定义 meta 属性，我们可以给想要缓存功能的路由定义一个keepAlive 属性，值为 true。利用$route.meta.keepAlive和!$route.meta.keepAlive优雅的判断keep-alive是否缓存当前页面-->
        <!--3.isRouterAlive，用于当前操作页面的刷新-->
        <transition name="router-fade" mode="out-in">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive && isRouterAlive" class="top"></router-view>
            </keep-alive>
        </transition>
        <transition name="router-fade" mode="out-in">
            <router-view v-if="!isRouterAlive && !$route.meta.keepAlive" class="top"></router-view>
        </transition>
        <transition name="router-fade" mode="out-in">
            <router-view v-if="isRouterAlive && !$route.meta.keepAlive" class="top"></router-view>
        </transition>
        <tabbar slot="tabbar" v-show="$route.meta.tabShow"></tabbar>
    </yd-layout>
</template>

<script>
    import axios from 'axios'
    import qs from 'qs'
    import navbar from './components/NavBar.vue'
    import tabbar from './components/TabBar.vue'
    import {mapGetters} from 'vuex'

export default {
    data () {
        return {
            isRouterAlive: true
        }
    },
    components: {
        navbar, tabbar
    },
    computed: {
        ...mapGetters([
            'shopName',
            'shopDesc',
            'shopLogo',
			'statistics'
        ])
    },
    beforeMount () {
        this.getShopSetting()
        this.AppUpdate()
    },
    provide () {
        return {
            reload: this.reload
        }
    },
    methods: {
        AppUpdate () {
            if ( mui.os.plus ) {
                setTimeout(function () {
                    // var param = { appversion: plus.runtime.version, type: plus.os.name == 'Android' ? 2 : 3 }
                    var param = {appversion: 1, type: 2}
                    axios.post(window.host + '/api/common/GetUpdateApp', qs.stringify(param)).then(res => {
                        if (res.status && res.data.length !== 0) {
                            plus.nativeUI.confirm('发现新版本' + res.data.version + '，马上体验吧！\r\n更新说明：\r\n' + res.data.Description, function(event) {
                                if ( 0 == event.index) {
                                    plus.runtime.openURL(res.data.DownLoadUrl)
                                }
                            }, '', ["立即更新", "取 消"])
                        }
                    }).catch()
                }, 5000)
            }
        },

        // 获取店铺配置 存入vuex
        getShopSetting () {
            this.$api.shopConfig().then(res => {
                this.$store.dispatch('shopConfig', res)
                if (this.$route.path === '/index') {
                    document.title = this.shopName
                }
                // 百度统计
                if(res.statistics){
                    var script=document.createElement("script");
                    script.innerHTML = res.statistics;
                    document.getElementsByTagName("body")[0].appendChild(script);
                }
            });
        },
        reload () {
            this.isRouterAlive = false
            this.$nextTick(() => {
                this.isRouterAlive = true
            })
        }
    },
    watch: {
        '$route': {
            handler () {
                document.title = this.$route.path === '/index' ? this.shopName : this.$route.meta.title
            }
        }
    }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: #F9F9F9;
}
#scrollView{
    margin-top: 0;
}
.router-fade-enter-active, .router-fade-leave-active {
    transition: opacity .3s;
}
.router-fade-enter, .router-fade-leave-active {
    opacity: 0;
}
</style>
